<template>
  <div class="device">
    <div class="device-des">
      <div class="device-des-item">
        <div class="device-des-first">
          <img
            style="width: 16px; height: 16px"
            src="../../../../assets/bim/zhengchang@2x.png"
            alt="正常设备"
          />
          <span class="device-des-name"> 正常设备 </span>
        </div>
        <div class="device-des-second">
          {{ normalNum }}个
        </div>
      </div>
      <div class="device-des-item-line"></div>
      <div class="device-des-item">
        <div class="device-des-first">
          <img
            style="width: 16px; height: 16px"
            src="../../../../assets/bim/yujing@2x.png"
            alt="预警设备"
          />
          <span class="device-des-name"> 预警设备 </span>
        </div>
        <div
          class="device-des-second"
          style="color: #ffb400"
        >
          {{ warningNum }}个
        </div>
      </div>
    </div>
    <div class="device-list">
      <div
        class="device-list-item"
        v-for="device in deviceData"
        :key="device.id"
      >
        <div
          class="device-list-item-title"
          @click="deviceClick(device)"
        >
          <span>{{ device.name }}</span>
          <span
            class="device-list-item-status"
            :class="{ 'is-active': device.isAlert === 1 }"
            >{{ device.deviceStatus }}</span
          >
        </div>
        <div
          v-show="device.checked"
          class="device-list-item-content"
        >
          <!--                    {{ device.mediasInfo }}-->
          <div
            v-for="(item, index) in device.mediasInfo"
            :key="index"
            style="margin-left: 8px"
          >
            · {{ item.name }}: {{ item.dataAddress }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { deviceInfoQuery } from '@/api/assets'

export default {
  name: 'Device',
  props: ['activeStage', 'bimNumber'],
  data() {
    return {
      normalNum: 0,
      warningNum: 0,
      deviceData: [
        // {
        //     id: 1,
        //     name: '设备名称1',
        //     isAlert: 0,
        //     deviceStatus: '正常',
        //     mediasInfo: 'http://dmctv.cn/chengdu/dhhdh123333',
        //     checked: true,
        // },
      ],
      layerId: '',
      stageId: ''
    }
  },
  computed: {
    defaultViewId() {
      return this.$store.state.layer.defaultViewId
    }
  },
  mounted() {
    this.layerId = this.activeStage.layerId
    this.stageId = this.activeStage.stageId
    this.dataMounted()
  },
  methods: {
    dataMounted() {
      // if (this.activeStage.dataService && this.activeStage.dataService.indexOf('/datasources/') !== -1 && this.activeStage.dataService.indexOf('/datasets/') !== -1) {
      //   const url = decodeURI(this.activeStage.dataService)
      //   const list = url.substring(url.indexOf('/datasources/') + '/datasources/'.length).split('/datasets/')
      //   const dataSourceAndDataSetList = [
      //     list.join(':')
      //   ]
      //   // console.log(dataSourceAndDataSetList)
      //   const sqlParameter = {
      //     datasetNames: dataSourceAndDataSetList,
      //     getFeatureMode: 'SQL',
      //     queryParameter: {
      //       attributeFilter: 'SmID!=0',
      //       fields: [this.activeStage.bimCode]
      //     }
      //   }
      //   const queryData = JSON.stringify(sqlParameter)
      //   axios
      //     .post(url.substring(
      //       0,
      //       url.lastIndexOf('/datasources/')
      //     ) + '/featureResults.rjson?returnContent=true', queryData)
      //     .then((res) => {
      //       if (res.data.features) {
      //         const value = res.data.features[0].fieldValues[0]
      //         // console.log(this.activeStage.bimCode, value)
      //         deviceInfoQuery({ code: value }).then(res => {
      //           console.log(res)
      //           if (res.success) {
      //             this.normalNum = res.data.length
      //             this.warningNum = 0
      //             res.data.forEach((item, index) => {
      //               const mediasList = []
      //               item.bimEquipmentInfoList.forEach(val => {
      //                 mediasList.push({
      //                   name: val.name,
      //                   dataAddress: val.dataAddress
      //                 })
      //               })
      //               const obj = {
      //                 id: index + 1,
      //                 name: item.bimEquipmentManage.name,
      //                 isAlert: 0,
      //                 deviceStatus: '正常',
      //                 mediasInfo: mediasList,
      //                 checked: false
      //               }
      //               this.deviceData.push(obj)
      //               // console.log(this.deviceData[index])
      //               // this.$set(this.deviceData[index], mediasInfo, mediasList)
      //             })
      //             if (this.deviceData.length > 1) {
      //               this.deviceData[this.deviceData.length - 1].isAlert = 1
      //               this.deviceData[this.deviceData.length - 1].deviceStatus = '预警'
      //             }
      //           }
      //         })
      //       }
      //     })
      // }
      if (this.bimNumber) {
        deviceInfoQuery({ code: this.bimNumber }).then(
          (res) => {
            console.log(res)
            if (res.success) {
              this.normalNum = res.data.length
              this.warningNum = 0
              res.data.forEach((item, index) => {
                const mediasList = []
                item.bimEquipmentInfoList.forEach((val) => {
                  mediasList.push({
                    name: val.name,
                    dataAddress: val.dataAddress
                  })
                })
                const obj = {
                  id: index + 1,
                  name: item.bimEquipmentManage.name,
                  isAlert: 0,
                  deviceStatus: '正常',
                  mediasInfo: mediasList,
                  checked: false
                }
                this.deviceData.push(obj)
                // console.log(this.deviceData[index])
                // this.$set(this.deviceData[index], mediasInfo, mediasList)
              })
              if (this.deviceData.length > 1) {
                this.deviceData[
                  this.deviceData.length - 1
                ].isAlert = 1
                this.deviceData[
                  this.deviceData.length - 1
                ].deviceStatus = '预警'
              }
            }
          }
        )
      }
    },
    // 设备信息点击事件
    deviceClick(item) {
      item.checked = !item.checked
    }
  }
}
</script>

<style scoped lang="scss">
.device {
  width: 100%;
  height: 100%;
}

.device-des {
  margin-left: 25px;
  margin-right: 25px;
  width: calc(100% - 50px);
  height: 56px;
  background: url('../../../../assets/bim/sbbj.png') center
    center / 100% 100% no-repeat;
  display: flex;
  flex-flow: row;
  margin-top: 20px;
  align-items: center;
  justify-content: center;

  .device-des-item {
    flex: 1;
    height: 100%;
    display: flex;
    flex-flow: column;
  }

  .device-des-item-line {
    width: 1px;
    height: 30px;
    background: rgba(15, 48, 83, 0.7);
    border: 1px solid rgba(0, 112, 149, 0.7);
    border-radius: 50%;
  }

  .device-des-first {
    width: 100%;
    /*flex: 1;*/
    height: 30px;
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .device-des-name {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 30px;
    margin-left: 4px;
  }

  .device-des-second {
    flex: 1;
    width: 100%;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #ffffff;
    height: 14px;
    line-height: 20px;
    text-align: center;
  }
}

.device-list {
  display: block;
  margin-top: 10px;

  .device-list-item {
    margin: 5px 20px;
  }

  .device-list-item-title {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 26px;
    cursor: pointer;
    background: rgba(2, 125, 180, 0.2);

    .device-list-item-status {
      float: right;
    }

    .device-list-item-status.is-active {
      color: #ffb400;
    }
  }

  .device-list-item-content {
    margin-left: 10px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #d2e6f0;
    line-height: 26px;
    //background: rgba(0, 10, 17, 0.2);
    border-radius: 2px;
  }
}
</style>
